<template>
	<div class="application">
	   <div class="application-position">
	   	您当前的位置 : 
	   	<a href="#/">首页 > </a>
	   	<span>申请入驻</span>
	   </div>
	   <div class="application-action">
	   	<div class="application-action-direction">
	   		<span v-for="item in imgUrl" v-bind:style="{ 'background-image': 'url(' + item.img + ')','background-repeat':'no-repeat','background-size':'232px 42px'}">{{item.text}}</span>	   	
	   		<p>填写基本信息 ( 带 * 为必填 , 请如实填写 )</p>
	   		<p>商家地址 : <input type="text" /></p>
	   		<p>商户名称 : <input type="text" placeholder="请输入6到20位字符"/></p>
	   		<p class="application-action-radio">商户类型 : <input type="radio" value="企业商户"  name="store"/>企业商户
			<input type="radio" value="个人商户" name="store"/>个人商户</p>
	   		<p>联系人 : <input type="text" class="application-action-name"/></p>
	   		<p>联系电话 : <input type="number" /></p>
	   		<p>备注 : <textarea class="application-action-mark"></textarea></p>
	   		
	   		<div class="app-action-pic">
	   			图片信息 :
	   			<div class="app-action-pic1">
	   				<p v-for="item in pic">{{item}}<br />
	   				<span>点击上传门脸照</span>
	   				<span>点击上传环境照</span>
	   				<span>点击上传证件照</span>
	   				</p>
	   				
	   			</div>
	   		</div>
	   	</div>
	   </div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name : "appliction",
		data (){
			return{		
			imgUrl : [{img:"../static/img/62.png",text:"1、提交资料"},{img:"../static/img/61.png",text:"2、确认协议"},{img:"../static/img/61.png",text:"3、支付保证金 "},{img:"../static/img/60.png",text:"4、审核入驻"}],
			 pic : ["1.商家门脸照","2.商家环境照","3.资质证件照"]
			
			}
		}
	}
</script>

<style type="text/css">
	.application-position,.application-action{		
		margin: 0 auto;
	}
	.application-position{
		width: 1180px;
		height: 56px;
        line-height: 56px;
        color: #999;
        font-size: 16px;
	}
	.application-position>span{
		color: #f60;
	}
	.application-action{
		width: 1020px;
		border: 1px solid #d3d3d3;
        padding: 80px;
        background: #fff;	
        margin-bottom: 56px;	
	}
	.application-action-direction>span{
		display: inline-block;
		width: 232px;
		height: 42px;
        text-align: center;
        color: #666;
        font-size: 16px;
        line-height: 42px;
	}
	.application-action-direction>span:nth-of-type(1){
		color: white;
	}
	.application-action-direction>p{
		margin: 30px 0;
        font-size: 26px;
         line-height: 35px;
         color: #666;
         font-size: 16px;
	}
	.application-action-direction>p:nth-of-type(1){
		color: #999;
	}
	.application-action-direction>p:nth-of-type(7){
		width: 490px;
		height: 150px;
		position: relative;
	}
	.application-action-direction input{
		border: 1px solid #D4D4D4;
		width: 410px;
          box-sizing: border-box;
         height: 35px;
         padding: 5px 8px;
        font-size: 16px;
        color: #666;
	}
	.application-action-radio>input  {
		width: 30px;
		vertical-align: middle;	
	}
	.application-action-name{
		margin-left:16px;
	}
	.application-action-mark{
		margin-left: 32px;
		width: 410px;
		height: 150px;
		position: absolute;
		top: 0;
		right: 0;
		border: 1px solid #D4D4D4;
	}
	.app-action-pic{
		width: 1000px;
		height: 580px;
		font-size: 16px;
		padding: 10px;
		color: #666;
		overflow: hidden;
	}
	.app-action-pic1{
		width: 900px;
		font-size: 16px;
		float: right;		
	}
	.app-action-pic1 p:nth-of-type(1){
		padding-top:0 ;
	}
	.app-action-pic1 p{
		padding-top: 20px;		 
        border-spacing: 15px;
        border-collapse: separate;
	}
	.app-action-pic1>p>span {
		display: inline-block;
        width: 125px;
        height: 125px;
        display:table-cell; 
        vertical-align:bottom;
        text-align: center;
        font-size: 14px;
        background: url(../assets/img/64.png) 50% 30% no-repeat,url(../assets/img/63.png) 100% 100%no-repeat,#e4e4e4;   
         color: white;  
	}
</style>
